<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 
        定位 position 偏移位置 通过left right top bottom进行位置偏移的
             position:static 默认值 不定位
             position:relative; 相对定位
                    1，相对自身的位置（原本）进行偏移，偏移之后的距离会被保留，通过left
                    right,top bottom进行位置偏移的，可以取负值
                    2，不脱离文档流，占位的

            什么情况下用相对定位？
                1, 如果想让标签自己走，不影响其他标签
                2，给绝对定位找参照物（最多）

        position:absolute; 绝对定位  通过left right,top bottom进行位置偏移的，可以取负值
            1，默认的参照物是，浏览器窗口(html根元素)的第一屏
                如果参考物变成父级，那么父级必须要有定位属性（建议加相对定位） 父相子绝
                绝对定位的参照物是一层一层往上找的

            2，脱离文档流，不占位的

        什么情况下会用到绝对定位
            1，一般用在二级菜单
            2，不占位


     -->
     <style>
         body{
             height:2000px;
         }
         .all{
             width:1000px; height:400px; border:solid 3px #000;
             margin: 100px auto;
             position: relative;
         }
         .box1{
             width:200px; height:200px;
             background: red;
             float:left;
             position: absolute;
             /* 绝对定位 */
            right:0px;
            /*  */
            bottom:50px;
            /*  */
         }
         .box2{
             width:200px; height:200px;
             background: green;
             float:left;
        
         }
         span{
             position: absolute;
             left:0; top:0;
         }
     </style>
</head>
<body>


<div class="all">
    <!-- .all有定位属性 -->
    <div class="box1">11</div>
    <!-- .box1绝对定位 -->
    <div class="box2">22</div>
</div>

</body>
</html>